<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>电影系统</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
		  integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>
<body>
<div id="app">
	<div class="container">
		<table class="table">
			<tr>
				<td>id</td>
				<td>电影名</td>
				<td>总票数</td>
			</tr>
			<tr v-for="(m,i) in movies" :key="m.id">
				<td>{{m.id}}</td>
				<td>{{m.movieName}}</td>
				<td>{{m.num}}</td>
			</tr>
		</table>
		<input class="btn-block" type="button" value="刷新库存" @click="refresh">
	</div>
	<div class="container">
		<table class="table" id="dataTable">
			<tr>
				<td>订单编号</td>
				<td>电影名</td>
				<td>订单状态</td>
			</tr>
			<tr v-for="(order,i) in orders" :key="i">
				<td>{{order.orderId}}</td>
				<td>{{order.movieName}}</td>
				<td>{{order.status === 0 ? "支付成功 ,出票中" : "已出票"}}</td>
			</tr>
		</table>
	</div>
</div>
</body>

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
    new Vue({
        el: "#app",
        data() {
            return {
                movies: {
                    type: Array,
                    default: {
                        return: []
                    }
                },
                orders: {
                    type: Array,
                    default: {
                        return: []
                    }
                },
            }
        },
        mounted() {
            this.getMovieList();
            this.init();
        },
        methods: {
            getMovieList() {
                axios.get('/movie/list')
                    .then(
                        res => {
                            this.movies = res.data;
                        }
                    )
                    .catch(function (error) { // 请求失败处理
                        console.log(error);
                    });


            },
            refresh() {
                this.getMovieList();
            },
            init() {
                if ("WebSocket" in window) {
                    let socket = new WebSocket("ws://127.0.0.1:6003/orderHandler")
                    socket.onopen = function () {
                        socket.send("sddsdd");
                    };
                    socket.onerror = function () {
                    };
                    let that = this;
                    socket.onmessage = function (evt) {
                        console.log(evt.data);
                        that.orders = JSON.parse(evt.data);
                    }
                    socket.onclose = function () {
                        console.log("server closed")
                    };
                } else {
                    alert("您的浏览器不支持WebSocket服务")
                }
            }
        },
    });
</script>
</html>